<template>
    <div class="rimBox wrap" v-if="remInfo.length">
        <header>相关推荐</header>
        <ul class="rimListBox clearfix">
            <li class="rimList" v-for="item in remInfo" :key="item.id">
                <router-link :to="{path:toUrl,query:{modeId:item.id}}" target="_blank">
                <div class="miniBox">
                    <div class="miniVip" v-if="item.is_vip"></div>
                    <div class="miniNew" v-if="item.update"></div>
                </div>
                <div class="rimImgBox">
                    <img :src="item.image" alt="">
                </div>
                <p class="clearfix rimInfoBox">
                    <span class="rimTitle">{{item.title}}</span>
                    <span class="rimCollDown">
                        <i class="rimColl" :class="{'avtiveColl':isInArray(item.id)}" title="收藏" @click.prevent.stop="collection({e:$event,id:item.id,type:type})"></i>
                        <i class="rimDown" title="下载" @click.prevent.stop="confirmDownload(item.id,item.title)"></i>
                    </span>
                </p>
                </router-link>
            </li>
        </ul>
    </div>
</template>
<script>
import {mapState,mapMutations,mapGetters,mapActions} from 'vuex';
export default {
    name:"",
    props:[
        'remInfo',
        'toUrl',
        'type'
        ],
    data(){
        return{
            rimInfo:null,
        }
    },
    computed: {
        ...mapState({//登录的用户信息
            user: state => state.AuthUser
        }),
        mismatchError() {
            return this.bag.has('password:auth') && !this.errors.has('password')
        },
    },
    methods:{
        confirmDownload(id,name) {
            var down = null;
            var errorMsg = "";
            if(this.type=="7"){
                down = "/downarticle/";
                errorMsg = "请开通VIP后再进行下载";
            }else{
                down = "/downdata/";
                errorMsg = "交易币不足，请充值后再进行下载...";
            }
           if(this.$store.state.AuthUser.userInfo){
                this.$Modal.confirm({
                    title: '提示',
                    content: '<p>确认下载?</p>',
                    loading: false,
                    draggable : true,
                    scrollable:true,
                    onOk: () => {
                        this.modeDownload(id,name,down,errorMsg)
                    }
                });
                
            }else{
                this.loginShow();
            }
            
        },
        ...mapMutations(//mutations中的方法
            ["loginShow","loginClose","loginLoginName","registerLoginName","collection"]
        ),
        isInArray(value){
           var arr = null;
           if(!this.user.userInfo){
               return
           }else{
               if(this.modeType!="7"){
                    arr = this.user.userInfo.data.datacollects;
                }else{
                    arr = this.user.userInfo.data.articlecollects;
                }
                for(var i = 0; i < arr.length; i++){
                    if(value === arr[i]){
                        return true;
                    }
                }
                return false;
           }
           
        },
        errorWarning(msg,n) {
             var This = this;
             this.$message({
                    message: msg,
                    type: 'error',
                    customClass : 'downLoadError',
                    duration : 2000,
                    showClose : true,
                    onClose:function () {
                        if(n){
                            let routeData = This.$router.resolve({ path: '/recharge'});
                            window.open(routeData.href, '_blank');
                        }
                    }
                });
        }, 
        modeDownload(id,name,down,errorMsg){//模型下载
            
                axios({
                    method: 'get',
                    url: down+id,
                }).then(response => {
                    if(response.data.status=="1"){
                        window.location.href = this.user.userInfo.data.app_url+"api/downurl/"+this.user.userInfo.data.user_id+"/"+this.type+"/"+id+"/"+response.data.passkey;
                    }else if(response.data.status=="0"){
                        this.errorWarning(errorMsg,true);
                    }
                }).catch((error) => {
                    this.errorWarning("下载失败",false);
                }) 
         },
    },
    created () {
        //  console.log(this.remInfo)
    }
}
</script>
<style>
    .rimBox header{
        font-size: 24px;
        line-height: 86px;
        color: #333333;
    }
    .rimListBox{
        padding-bottom: 53px;
        margin-right: -20px;
    }
    .rimList{
        float: left;
        width: 300px;
        height: 275px;
        position:relative;
        border-radius: 4px;
        overflow: hidden;
        margin-right: 19px;
    }
    .rimList .miniBox{
        position:absolute;
        top:0;
        padding-left: 20px;
    }
    .rimList .miniVip{
        display:inline-block;
        margin-right: 11px;
        height: 50px;
        width: 32px;
        background: url(../img/miniVip1.png) no-repeat left top;
        background-size:100%;
    }
    .rimList .miniNew{
        display:inline-block;
        height: 50px;
        width: 32px;
        background: url(../img/newUpload1.png) no-repeat left top;
         background-size:100%;
    }
    .rimImgBox img{
        display:block;
        width: 300px;
        height: 225px;
    }
    .rimInfoBox{
        background: #fff;
    }
    .rimTitle{
        float: left;
        font-size: 16px;
        line-height: 50px;
        color: #333333;
        padding-left: 8px;
        width: 200px;
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
    }
    .rimCollDown{
        float: right;
        padding-top: 17px;
        padding-right: 11px;
    }
    .rimColl{
        float: left;
        width: 20px;
        height: 18px;
        margin-right: 23px;
        background: url(./img/bigCollNum.png) no-repeat center;
    }
    .rimColl:hover{
        background: url(./img/collBottom.png) no-repeat center;
    }
    .rimDown{
        float:left;
        width: 18px;
        height: 16px;
        background: url(./img/downloadNum1.png) no-repeat center;
    }
    .rimDown:hover{
        background: url(./img/newHoverDownload.png) no-repeat center;
    }
    .avtiveColl{
        background: url(../img/hoverColl.png) no-repeat center;
    }
</style>